<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps and Earth</title>
    <style type="text/css"> html, body {width: 100%; height: 100%} body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px} </style>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA3ckB13KkM9nCEhh8OfWXPRSD8JLc-Sy1aLQYP5TxmvUPy73z4hS3tlUM-5pMRSQj1LCtVDpTf1o76g" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    var ge;

    google.load("maps", "2.x");

    function init() {
      map = new GMap2(document.getElementById('map3d'));

      var mapui = map.getDefaultUI();
      map.setUI(mapui);

      // add 'Earth' as one of the map types
      map.addMapType(G_SATELLITE_3D_MAP);

      try
    {
    if(window.attachEvent) {
      window.attachEvent("onresize", function() {this.map.onResize()} );
    }
    else {
      window.addEventListener("resize", function() {this.map.onResize()} , false);
    }
    GDownloadUrl("{{GPXFILE}}",
      function(data, responseCode) {
      // To ensure against HTTP errors that result in null or bad data,
      // always check status code is equal to 200 before processing the data
      if(responseCode == 200) {
        var points=[];
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("trkpt");
        var firstPoint=new GLatLng(parseFloat(markers[0].getAttribute("lat")),
                     parseFloat(markers[0].getAttribute("lon")));
        var lastPoint=firstPoint
        for (var i = 1; i < markers.length; i++) {
        var newPoint=new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                     parseFloat(markers[i].getAttribute("lon")));
        if(newPoint.distanceFrom(lastPoint)>10)
        {
          points.push(newPoint);
          lastPoint=newPoint;
        }
        }

        map.setCenter(firstPoint, 14);
        map.addOverlay(new GPolyline(points));
      }
      else
      if(responseCode == -1) {
        //alert("Data request timed out. Please try later.");
        map.setCenter(new GLatLng(45.184, 5.722), 5);
      }
      else {
        //alert("Request resulted in error ("+responseCode+"). Check XML file is retrievable.");
        map.setCenter(new GLatLng(45.184, 5.722), 5);
      }
      }
    );
    }
    catch(error)
    {
    //alert("Error during gpx file parsing.");
    //map.setCenter(new GLatLng(45.1846, 5.772), 5);
    }

      map.addOverlay(polyline);

      // do stuff with Earth when the user switches to it
      GEvent.addListener(map, 'maptypechanged', function() {
        if (ge)
          return;

        map.getEarthInstance(function(pluginInstance) {
          ge = pluginInstance;
        });
      });
    }

    </script>
  </head>
  <body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
    <div id="map3d" style="width: 100%; height: 100%;"></div>
  </body>

</html>
